<template>
  <div class="dialog">
    <el-form :inline="true" :model="params" class="demo-form-inline">
      <el-form-item label="选择车商">
        <el-select v-model="params.dealerId" filterable multiple style="width:100%">
            <el-option v-for="item in businessList" :key="item.id" :label="item.dealerName" :value="item.id">
            </el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="params.flag">
          <el-option label="全部" value=""></el-option>
          <el-option label="正常" value="1"></el-option>
          <el-option label="退款中" value="2"></el-option>
          <el-option label="已退款" value="3"></el-option></el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch" style="margin-left: 100px">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" border stripe style="width: 100%" v-loading="loading" size="small">
      <el-table-column prop="id" label="序号" align="center" width="90"> </el-table-column>
      <el-table-column prop="auctionName" label="拍卖名称" align="center"></el-table-column>
      <el-table-column prop="dealerName" label="车商" align="center" ></el-table-column>
      <el-table-column prop="amount" label="保证金" align="center"> </el-table-column>
      <el-table-column label="拍卖状态"  align="center" >
        <template slot-scope="scope">
          <span v-if="scope.row.auctionFlag == 1" style="color: #67C23A;">进行中</span>
          <span v-if="scope.row.auctionFlag == 2" style="color: #F56C6C;">已结束</span>
        </template>
      </el-table-column>
      <el-table-column prop="payOrderNo" label="订单号" align="center" ></el-table-column>
      <el-table-column prop="flag" label="状态" align="center" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.flag == 1" style="color: #67C23A;">正常</span>
          <span v-if="scope.row.flag == 2" style="color: #67C23A;">退款中</span>
          <span v-if="scope.row.flag == 3" style="color: #F56C6C;">已退款</span>
          <span v-if="scope.row.flag == 4" style="color: #F56C6C;">拒绝退款</span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" align="center" width="150"></el-table-column>
     
    </el-table>
    <div class="block" style="float: left; margin-top: 20px">
      <div>
        <span style="
            padding-top: 10px;
            display: inline-block;
            vertical-align: middle;
            color: #606266;
            font-size: 14px;
          ">显示第{{ this.params.page }}页的{{ this.params.rows }}条记录，总共{{
            this.total
          }}条记录
        </span>
      </div>
    </div>
    <div class="block" style="float: right; margin-top: 20px">
      <el-pagination :current-page.sync="params.page" :page-sizes="[10, 20, 50, 100]" :page-size="params.rows" background
        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>

    

  </div>
</template>
<script>
import {
  getAuctionMoney,applyRefund,getBusinessList
} from "@/api/carBusiness";
import _ from 'lodash';
export default {
  data() {
    return {
      loading: false,
      currentPage4: 4,
      total: 0,
      params: {
        dealerId: '',
        flag:'',
        auctionId:''
      },
      tableData: [],
      editShopVisible: false,
      modifyVisible: false,
      businessList:[],
      shopData: {
        id: 0,
        dealerName: '',
        mobile: '',
        address: '',
      }
    };
  },

  methods: {
    onSearch() {
      this.getData();
    },
    handleSizeChange(val) {
      this.params.rows = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.params.page = val;
      this.getData();
    },
    getData(exportExcel) {
      if (exportExcel) {
        this.params.export = true
      } else {
        this.loading = true;
        let params = {
          pageSize: this.params.rows,
          pageNo: this.params.page,
          filter: [],
          orderType:'desc',
          orderField:'id'
        }
        if(this.params.dealerId!=''){
          params.filter.push({
            field: 'dealerId',
            operator: 'IN',
            value: this.params.dealerId
          })
        }
        if(this.params.flag!=''){
          params.filter.push({
            field: 'flag',
            operator: 'EQ',
            value: this.params.flag
          })
        }
        getAuctionMoney(params).then((res) => {
          _.forEach(res.data.rows, function (value, key) {
            if (value.images != null) {
              var imgs = value.images.split(",");
              for (var index = 0; index < imgs.length; index++) {
                imgs[index] = process.env.VUE_APP_BASE_URL + imgs[index]
              }
              value.images = imgs;
            }
          });

          this.loading = false;
          this.total = res.data.total;
          this.tableData = res.data.rows;
        });
      }
    },
    onModifyStatus(row, flag) {
      this.modifyVisible = true;
      this.shopData.id = row.id;
      this.shopData.flag = flag;
    },
    handleModifyStatus() {
      applyRefund(this.shopData.id, 1).then((res) => {
        this.getData();
        this.modifyVisible = false;
      });
    },
    resetForm() {
      this.shopData = {
        id: 0,
        dealerName: '',
        mobile: '',
        address: '',
      }
    }
  },
  mounted() {
    this.getData();
    getBusinessList({ pageNo: 1, pageSize: 1000 }).then((res) => {
        this.businessList = res.data.rows;
      });
  },
};
</script>
<style scoped lang="scss">
.my-radio {
  margin-bottom: 10px;
}

.dialog {
  width: 95%;
  height: 100%;
  padding-top: 10px;
  margin-left: 10px;
}
</style>
